import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro';
import { useLoad } from '@tarojs/taro'
import './index.scss'
import messageIcon from '../../assets/icon9.png'
import siteIcon from '../../assets/icon8.png'
import rightIcon from '../../assets/right.png'
import balanceIcon from '../../assets/balance.png'
import { useState } from 'react'
import Header from '../../components/header'
import Recharge from './recharge/index'
const avatar = 'https://pzdsoss.pzds.com//im/20231101/14974e47_1698833412584.png'

export default function Mine() {
  const [tab, setTab] = useState(['作品', '点赞', '收藏'])
  const [tabIndex, setTabIndex] = useState(0)
  // 充值弹窗
  const [rechargeModal, setRechargeModal] = useState(false)

  return (
    <View className='Mine'>
      <Header />
      <View className="header">
        <Image className="avatar" src={avatar} />
        <View className="info">
          <Text className='title'>成都陈冠希</Text>
          <View>
            <View>
              <Text>余额：999</Text>
              <Image className="avatar" src={balanceIcon} />
            </View>
            <View onClick={() => setRechargeModal(true)}>
              <Text>充值</Text>
              <Image className="avatar" src={rightIcon} />
            </View>
          </View>
        </View>
        <Image className="message" src={messageIcon} />
        <Image className="site" src={siteIcon} onClick={() => Taro.navigateTo({ url: 'site/index' })} />
      </View>
      <View className="edit_info">
        <Text>编辑资料</Text>
      </View>
      <View className="active_banner">
        <Text>充值50元，返利20元！</Text>
        <Text>查看详情</Text>
      </View>
      <View className="tab">
        {tab.map((e, i) => (<Text onClick={() => setTabIndex(i)} className={tabIndex === i && 'active'} key={e}>{e}</Text>))}
      </View>
      <View className="btns">
        <Text>发布作品</Text>
        <Text>保存到相册</Text>
        <Text>极致4k</Text>
      </View>
      <View className="works">
        <View></View>
        <View></View>
        <View></View>
        <View></View>
        <View></View>
      </View>
      {/* 充值弹窗 */}
      <Recharge isOpen={rechargeModal} onClose={() => setRechargeModal(false)} />
    </View>
  )
}
